<template>
	<view>
		<sms-item :sms="cloudRecords.rows" />
		<uni-load-more :status="total === 0 ? 'no-more' : loadStatus"></uni-load-more>
	</view>
</template>

<script setup>
	import {
		computed,
		onMounted,
		ref,
		onUnmounted,
		reactive
	} from 'vue';
	import {
		onReachBottom,
		onPullDownRefresh
	} from "@dcloudio/uni-app";
	import {
		useStore
	} from 'vuex';
	const store = useStore();

	const cloudRecords = computed(() => store.state.cloudRecords);

	const loadStatus = ref('more');

	onMounted(() => {
		store.dispatch('getCloudRecords');
	});

	const initCloudRecords = () => {
		loadStatus.value = 'more';
		store.commit('setQuery', {
			limit: 10,
			offset: 0
		});
		store.commit('setCloudRecords', {
			rows: [],
			count: 0
		});
	};

	onPullDownRefresh(() => {
		uni.stopPullDownRefresh();
		initCloudRecords();
		store.dispatch('getCloudRecords');
	});

	const total = computed(() => store.state.cloudRecords.count);
	const limit = computed(() => store.state.query.limit);
	const offset = computed(() => store.state.query.offset);
	const currentCount = computed(() => limit.value + offset.value);

	onReachBottom(() => {
		if (total.value <= currentCount.value) {
			loadStatus.value = 'no-more';
		} else {
			const query = {
				limit: limit.value,
				offset: limit.value + offset.value
			}
			store.commit('setQuery', query);
			store.dispatch('getCloudRecords');
		}
	});

	onUnmounted(() => {
		initCloudRecords();
	});
</script>

<style>

</style>
